<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导包-->
    <script src="/static/vue/vue.min.js"></script>
    <style>
        .box{
            background-color: red;
            width: 200px;
            height: 200px;
        }
        img{
            width: 200px;
        }
    </style>
</head>
<body>
{% verbatim %}   <!--标签内的内容，django模板语法失效-->
    <!--2、创建容器-->
    <div id="content">
        {{ msg }}
        年龄：{{ age }}
        <div v-if="flag">
            <div v-bind:id="item">                这是id
            </div>
            <div v-for="one in hobby">
                我的爱好：{{ one }}
            </div>
            <div v-bind:class="classname">
                这是class
            </div>
            <img v-bind:src="imgpath" alt="">
        </div>
        <button v-on:click="say()">点击</button>
    </div>
{% endverbatim %}
    <script>
        new Vue(   //3、创建vue对象
            {
                el:"#content",   // 绑定元素对象
                data:{          // 要绑定的数据
                    hobby:["编程","睡觉","懒"],
                    msg: "hello world",
                    age:23,
                    flag:true,
                    item:"item",
                    classname:"box",
                    imgpath:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601288658657&di=9d15fe0c7aad08a5d85ba6f2aebc6a4f&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg"
                },
                methods:{
                    say:function () {
                        alert("hello")
                    }
                },
                created:function () {
                    alert("init")
                }
            }
        )
    </script>
</body>
</html>